import {
  Modal,
  Button,
  Space,
  Table,
  Tooltip,
  Pagination,
  Spin,
  Input,
  Select,
} from "antd";
import { PlusOutlined } from "@ant-design/icons";

import useProcessInstanceList from "@/hooks/ProcessInstanceListLogic.jsx";
import ProcessInstanceDetail from "./ProcessInstanceDetail.jsx";
import StartProcess from "./StartProcess.jsx";
import Title from "@/components/Title.jsx";
function ProcessInstanceList(props) {
  const {
    procInstId,
    setKeyWords,
    loading,
    setLoading,
    tableData,
    paginationData,
    search,
    onPaginationChange,
    onTableChange,
    columnsData,
    processDefList,
    onProcessDefSearch,
    setProcDefId,
    startProcessModalVisible,
    openStartProcessModal,
    closeStartProcessModal,

    modalVisibleForProcInst,
    setModalVisibleForProcInst,
    openModalForProcInst,
    closeModalForProcInst,
  } = useProcessInstanceList();

  return (
    <div>
      <div style={{ display: "flex",alignItems: "center" }}>
        <Title
          title="Process Instance List"
          style={{
            flex: "0 0 300px",
          }}
        >
          aaabbb
        </Title>

        <div style={{ marginBottom: 8, textAlign: "right", flex: "1 1 auto" }}>
          <Space>
            <Input.Group compact>
              <Select
                showSearch
                placeholder="Select a process Defination"
                onSearch={onProcessDefSearch}
                allowClear={true}
                notFoundContent={null}
                options={(processDefList || []).map((d) => ({
                  value: d.value,
                  label: d.text,
                }))}
                onChange={(v) => {
                  setProcDefId(v);
                }}
              ></Select>

              <Input
                style={{ textAlign: "left", width: 200 }}
                onChange={(e) => {
                  setKeyWords(e.target.value);
                }}
              />

              <Button
                type="primary"
                onClick={() => {
                  search(true);
                }}
              >
                Search
              </Button>
            </Input.Group>

            <Button icon={<PlusOutlined />} onClick={openStartProcessModal} />
          </Space>
        </div>
      </div>
      <Spin spinning={loading} tip="Loading...">
        <div className="card card-outline card-info">
          <Table
            pagination={false}
            size="small"
            dataSource={tableData.list}
            columns={columnsData.current}
            rowKey={"processInstanceId"}
            onChange={onTableChange}
            scroll={{ x: 1300 }}
          />
          <div style={{ textAlign: "right", padding: 8 }}>
            <Pagination
              onChange={onPaginationChange}
              size="small"
              total={paginationData.current.total}
              showTotal={(total) => `Total ${total} items`}
              pageSize={paginationData.current.pageSize}
              current={paginationData.current.current}
              showSizeChanger
              pageSizeOptions={paginationData.current.pageSizeOptions}
            />
          </div>
        </div>
      </Spin>

      <Modal
        width={800}
        title="Start Process"
        open={startProcessModalVisible}
        footer={null}
        onCancel={closeStartProcessModal}
        destroyOnClose={true}
        maskClosable={false}
      >
        <StartProcess onClose={closeStartProcessModal}></StartProcess>
      </Modal>
    

      <Modal
        width={`95%`}
        style={{height:800}}
        title="Process Instance Detail"
        open={modalVisibleForProcInst}
        footer={null}
        onCancel={closeModalForProcInst}
        destroyOnClose={true}
        maskClosable={false}
      >
        <ProcessInstanceDetail procInstId={procInstId} ></ProcessInstanceDetail>
      </Modal>




    </div>
  );
}

export default ProcessInstanceList;
